import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Dimensions,
  SafeAreaView,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';

const { width, height } = Dimensions.get('window');

const AddSelectionScreen: React.FC = () => {
  const navigation = useNavigation<any>();

  const handlePublishCar = () => {
    // 导航到发布汽车页面
    navigation.navigate('Add');
  };

  const handleQuickRecycle = () => {
    // 导航到快速回收页面
    navigation.navigate('RapidRecycle');
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>选择操作</Text>
        <Text style={styles.subtitle}>请选择您要进行的操作</Text>
      </View>

      <View style={styles.optionsContainer}>
        {/* 发布汽车选项 */}
        <TouchableOpacity 
          style={styles.optionCard} 
          onPress={handlePublishCar}
          activeOpacity={0.8}
        >
          <View style={styles.optionIcon}>
            <Text style={styles.iconText}>🚗</Text>
          </View>
          <Text style={styles.optionTitle}>发布汽车</Text>
          <Text style={styles.optionDescription}>
            发布您的二手车信息，寻找买家
          </Text>
          <View style={styles.optionFeatures}>
            <Text style={styles.feature}>• 详细车辆信息</Text>
            <Text style={styles.feature}>• 多图展示</Text>
            <Text style={styles.feature}>• 价格协商</Text>
            <Text style={styles.feature}>• 买家沟通</Text>
          </View>
          <View style={styles.arrowContainer}>
            <Text style={styles.arrow}>→</Text>
          </View>
        </TouchableOpacity>

        {/* 快速回收选项 */}
        <TouchableOpacity 
          style={styles.optionCard} 
          onPress={handleQuickRecycle}
          activeOpacity={0.8}
        >
          <View style={styles.optionIcon}>
            <Text style={styles.iconText}>⚡</Text>
          </View>
          <Text style={styles.optionTitle}>快速回收</Text>
          <Text style={styles.optionDescription}>
            AI快速估价，专业团队上门回收
          </Text>
          <View style={styles.optionFeatures}>
            <Text style={styles.feature}>• AI智能估价</Text>
            <Text style={styles.feature}>• 5分钟出价</Text>
            <Text style={styles.feature}>• 1小时回收</Text>
            <Text style={styles.feature}>• 即时到账</Text>
          </View>
          <View style={styles.arrowContainer}>
            <Text style={styles.arrow}>→</Text>
          </View>
        </TouchableOpacity>
      </View>

      <View style={styles.footer}>
        <Text style={styles.footerText}>
          💡 提示：发布汽车适合想要获得更高价格的用户，快速回收适合急需用钱的用户
        </Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    backgroundColor: '#007AFF',
    paddingTop: 20,
    paddingBottom: 30,
    paddingHorizontal: 20,
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#fff',
    opacity: 0.9,
    textAlign: 'center',
  },
  optionsContainer: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  optionCard: {
    backgroundColor: '#fff',
    borderRadius: 20,
    padding: 25,
    marginBottom: 20,
    elevation: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    position: 'relative',
  },
  optionIcon: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: '#f0f8ff',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 15,
  },
  iconText: {
    fontSize: 30,
  },
  optionTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
  },
  optionDescription: {
    fontSize: 14,
    color: '#666',
    marginBottom: 15,
    lineHeight: 20,
  },
  optionFeatures: {
    marginBottom: 20,
  },
  feature: {
    fontSize: 13,
    color: '#555',
    marginBottom: 5,
    lineHeight: 18,
  },
  arrowContainer: {
    position: 'absolute',
    right: 25,
    top: '50%',
    marginTop: -15,
  },
  arrow: {
    fontSize: 24,
    color: '#007AFF',
    fontWeight: 'bold',
  },
  footer: {
    padding: 20,
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#e0e0e0',
  },
  footerText: {
    fontSize: 12,
    color: '#666',
    textAlign: 'center',
    lineHeight: 18,
  },
});

export default AddSelectionScreen; 